<template>
  <view :class="['p-qualifications']">
    <!--tabs-->
    <view class="title" @click="isShow = !isShow">
      商品资质
      <x-icon style="margin-left: 8px" :name="iconName" size="24" color="#323233" />
    </view>
    <!-- 商品详情 -->
    <view class="detail" :style="{height: isShow ? 'auto' : '0'}">
      <block style="width: 100%" v-for="(item, index) in qualificationPics" :key="index">
        <image
          :src="formatOss(item)"
          :style="[setPicStyle(item)]"
          class="_image"
          lazy-load
          mode="widthFix"
        />
      </block>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon/index.vue';

export default {
  name: 'PQualifications',
  components: {
    XIcon
  },
  props: {
    qualificationPics: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  computed: {
    iconName() {
      return this.isShow ? 'icon-015' : 'icon-016';
    }
  },
  created() {},
  methods: {
    handleChangeTab(e) {
      this.currentTab = this.tab[e]?.value;
    },
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 600);
    },
    // 设置图文详情图片样式
    setPicStyle(item) {
      if (item.includes('?width=')) {
        return this.$tools.convertPicRatio(item);
      } else {
        return {};
      }
    }
  }
};
</script>

<style lang="scss">
// 商品介绍/规格信息
.p-qualifications {
  background: #ffffff;text-align: center;
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .detail {
    overflow: hidden;
  }
  ._image{ width: 100%;}
}
</style>
